<script setup>
import { ref } from 'vue'
import FileTree from './components/files/FileTree.vue'
import VditorComponent from "./components/vditor/VditorComponent.vue";

const content = ref('')

const openFile = async (path) => {
  if (path.endsWith('.md')) {
    content.value = await window.electronAPI.readFile(path)
  }
}
</script>

<template>
  <div class="container">
    <!-- 左侧文件树 -->
    <div class="sidebar">
      <FileTree @file-selected="openFile" />
    </div>

    <!-- 右侧编辑器 -->
    <div class="editor-container">
      <VditorComponent />
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: calc(100vh - 16px); /* 占据整个窗口高度 */
  overflow: hidden; /* 新增溢出隐藏 */
}

.sidebar {
  width: 250px; /* 固定宽度 */
  height: 100%;
  border-right: 1px solid #e8e8e8;
  /*overflow-y: auto;*/
}

.editor-container {
  flex: 1; /* 自动填充剩余空间 */
  height: 100%;
  /*overflow: hidden;*/
}
</style>
